<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <!-- 头部工具栏 -->
    <ToolBar>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-button v-show="$btnPermission.verify('RoleAdd')" type="primary" :loading="loading" @click="addRole">新增</el-button>
        </el-col>
      </el-row>
    </ToolBar>

    <!-- 数据表格 -->
    <TablePage ref="roleTablePage" :customTableHeight="235" :loading.sync="loading" :table-data="roleTableDatas" :columns="columns" @reloadData="loadTableData"/>

    <!-- 新增 -->
    <AddRole ref="addRole" :title.sync="addRoleTitle" :showDialog.sync="addRoleVisible" :rowId.sync="rowId" @reloadData="loadTableData"/>
  </PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import ToolBar from '@/components/ToolBar/index.vue'
import TablePage from '@/components/TablePage/index.vue'

import AddRole from './components/addRole.vue'

import { rolePage } from '@/api/role'

export default {
name: 'RolePage',
components: {
  PageCard,
  ToolBar,
  TablePage,
  AddRole
},
data() {
  return {
    loading: false,
    addRoleTitle: null,
    addRoleVisible: false,
    roleTableDatas: [],
    rowId: null,
    columns:[{
      title: '角色名称',
      name: 'roleName',
      align: 'center',
      width: 150
    }, {
      title: '备注',
      name: 'remark',
      align: 'center',
      width: 250
    }, {
      title: '排序',
      name: 'roleSort',
      align: 'center',
      width: 100
    }, {
      title: '操作',
      name: 'operate',
      width: 250,
      align: 'center',
      operate: [{
        name: '编辑',
        permission: 'EditRole',
        fun: this.editRole,
        customStyle: {
          'margin-left': '10px'
        }
      }]
    }]
  }
},
created(){
  this.$nextTick(()=>{
    this.loadTableData()
  })
},
methods: {
  // 加载数据
  async loadTableData(){
    this.loading = true
    const {pageNumber, pageSize} = this.$refs.roleTablePage.page
    const res = await rolePage({pageNumber, pageSize})
    this.$refs.roleTablePage.page.pageNumber = res.data.pageNumber
    this.$refs.roleTablePage.page.pageSize = res.data.pageSize
    this.$refs.roleTablePage.page.total = res.data.total
    this.roleTableDatas = res.data.rows
    this.loading = false
  },

  // 新增
  addRole(){
    this.addRoleTitle = '新增'
    this.addRoleVisible = true
  },

  // 编辑
  editRole(row){
    if(!row) return

    this.rowId = row.id
    this.addRoleTitle = '编辑'
    this.addRoleVisible = true
  }
}
}
</script>
<style lang="scss" scoped>

</style>